<template>
    <view class="wrong-page">
      <!-- 顶部栏 -->
      <view class="wrong-header-bar">
        <uv-icon name="arrow-left" size="28" color="#fff" class="wrong-back" @click="goBack" />
        <text class="wrong-title">答题历史</text>
       
      </view>
      <!-- 统计卡片 -->
      <view class="wrong-stat-card">
       <uv-input placeholder="请输入关键字搜索" border="surround" v-model="value" @change="change"></uv-input>
    <uv-button text="搜索" type="primary" @click="search"></uv-button>
      </view>
      <!-- 题型Tab -->
   
      <!-- 错题列表 -->
      <view class="wrong-list">
        <view class="wrong-card" v-for="item in filteredList" :key="item.id">
          <view class="wrong-card-row1">
            <uv-icon :name="item.typeIcon" size="22" color="#3ad6b6" style="margin-right: 8rpx;" />
            <text class="wrong-card-title">{{ item.title }}</text>
          </view>
          <view class="wrong-card-date">{{ item.date }}</view>
          <view class="wrong-card-type">{{ item.typeLabel }}</view>
          <view class="wrong-answer-block">
            <view class="wrong-answer-row">
              <text class="wrong-answer-label">你的答案</text>
              <text :class="['wrong-answer-value', item.isCorrect ? 'right' : 'wrong']">{{ item.userAnswer }}</text>
            </view>
            <view class="wrong-answer-row">
              <text class="wrong-answer-label">正确答案</text>
              <text class="wrong-answer-value right">{{ item.correctAnswer }}</text>
            </view>
          </view>
          <view class="wrong-card-actions">
            <uv-button type="primary" size="small" plain class="wrong-btn" style="margin-right: 16rpx;">查看解析</uv-button>
            <uv-button type="primary" size="small" class="wrong-btn">重新练习</uv-button>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
import uvInput from '../uni_modules/uv-input/components/uv-input/uv-input.vue'
  export default {
  components: { uvInput },
    data() {
      return {
        tabIndex: 0,
        wrongList: [
          {
            id: 1,
            type: 'choice',
            typeLabel: '选择题',
            typeIcon: 'question-circle',
            title: '在React中，哪个生命周期方法会在组件挂载后立即调用？',
            date: '2025-07-23',
            userAnswer: 'undefined',
            correctAnswer: 'componentDidMount',
            isCorrect: false
          },
          {
            id: 2,
            type: 'judge',
            typeLabel: '判断题',
            typeIcon: 'question-circle',
            title: '在JavaScript中，null 和 undefined 是严格相等的（使用 === 比较）。',
            date: '2025-07-23',
            userAnswer: '错误',
            correctAnswer: '错误',
            isCorrect: true
          },
          {
            id: 3,
            type: 'qa',
            typeLabel: '问答题',
            typeIcon: 'question-circle',
            title: '在SQL中，哪种连接类型会返回两个表中所有的记录？',
            date: '2025-07-23',
            userAnswer: '',
            correctAnswer: 'FULL JOIN',
            isCorrect: false
          }
        ]
      }
    },
    computed: {
      filteredList() {
        if (this.tabIndex === 0) return this.wrongList
        const typeMap = ['choice', 'judge', 'qa']
        return this.wrongList.filter(item => item.type === typeMap[this.tabIndex - 1])
      }
    },
    methods: {
      goBack() {
        uni.navigateBack()
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  @import "@/uni.scss";
  .wrong-page {
    min-height: 100vh;
    background: #f8f8f8;
    box-sizing: border-box;
    padding-bottom: 32rpx;
  }
  .wrong-header-bar {
    background: $uni-default-color;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
    height: 90rpx;
    position: sticky;
    top: 0;
    z-index: 10;
    .wrong-back {
      position: absolute;
      left: 24rpx;
    }
  }
  .wrong-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  .wrong-stat-card {
    background: #fff;
    border-radius: 18rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx ;
    margin: 24rpx auto 18rpx auto;
    width: 92%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    gap: 22rpx;
  }
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stat-num {
    color: #4ecdc4;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 6rpx;
  }
  .stat-label {
    color: #888;
    font-size: 22rpx;
  }
  .custom-tabs {
    display: flex;
    background: #fff;
    border-radius: 18rpx;
    margin: 0 auto 18rpx auto;
    width: 92%;
    padding: 8rpx 0;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  }
  .custom-tab {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 18rpx 0 18rpx 0;
    position: relative;
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 500;
  }
  .custom-tab.active {
    color: #4ecdc4;
    font-weight: bold;
  }
  .custom-tab-underline {
    position: absolute;
    left: 50%;
    bottom: 4rpx;
    transform: translateX(-50%);
    width: 40rpx;
    height: 6rpx;
    background: #4ecdc4;
    border-radius: 3rpx;
  }
  .wrong-list {
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18rpx;
  }
  .wrong-card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
    padding: 24rpx 18rpx 18rpx 18rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    border-left: 8rpx solid #4ecdc4;
  }
  .wrong-card-row1 {
    display: flex;
    align-items: center;
    margin-bottom: 6rpx;
  }
  .wrong-card-title {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
  }
  .wrong-card-date {
    font-size: 20rpx;
    color: #aaa;
    margin-bottom: 4rpx;
  }
  .wrong-card-type {
    font-size: 20rpx;
    color: #4ecdc4;
    margin-bottom: 8rpx;
  }
  .wrong-answer-block {
    background: #f8f8f8;
    border-radius: 10rpx;
    padding: 12rpx 10rpx;
    margin-bottom: 8rpx;
  }
  .wrong-answer-row {
    display: flex;
    align-items: center;
    margin-bottom: 6rpx;
  }
  .wrong-answer-label {
    color: #888;
    font-size: 22rpx;
    margin-right: 12rpx;
  }
  .wrong-answer-value {
    font-size: 22rpx;
    padding: 0 8rpx;
    border-radius: 6rpx;
  }
  .wrong-answer-value.right {
    color: #4ecdc4;
    background: #e6f7f6;
  }
  .wrong-answer-value.wrong {
    color: #ff4d4f;
    background: #ffeaea;
  }
  .wrong-card-actions {
    display: flex;
    align-items: center;
    margin-top: 8rpx;
  }
  .wrong-btn {
    min-width: 160rpx;
    font-size: 24rpx;
  }
  </style>
  